<template>
  <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU"
             :visible.sync="crud.status.cu > 0"
             :title="crud.status.title" width="950px">
    <el-form ref="formData" :model="formData" class="attrFrom"  :rules="rules" label-width="130px" :inline="true">
      <el-row :gutter="24" type="flex">
        <el-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
          <el-form-item label="会员权益名称：" prop="name">
            <el-input type="text" placeholder="请输入会员权益名称" v-model="formData.name"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" type="flex">
        <el-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
          <el-form-item label="会员权益描述：" prop="content">
            <el-input type="text" placeholder="请输入会员权益描述" v-model="formData.content"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" type="flex">
        <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
          <el-form-item class="label" label="商品：" props="state">
            <el-table
              ref="table"
              :data="appointList"
              empty-text="暂无数据"
              border
            >
              <el-table-column prop="productId" label="商品编号" width="130" />
              <el-table-column prop="productName" label="商品名称" width="130" />
              <el-table-column prop="num" label="数量" width="110">
                <template slot-scope="scope">
                  <span><el-input type="text" v-model="scope.row.num"/></span>
                </template>
              </el-table-column>
              <el-table-column  label="操作">
                <template slot-scope="scope">
                  <a @click="delCity(index,1)">删除</a>
                </template>
              </el-table-column>

            </el-table>
            <el-row type="flex" class="addTop">
              <el-col>
                <el-button type="primary" icon="md-add" @click="addCity(1)">单独添加商品</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" type="flex">
        <el-col :xl="18" :lg="18" :md="18" :sm="24" :xs="24">
          <el-form-item label="备注：" prop="remark">
            <el-input type="text" placeholder="备注" v-model="formData.remark"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24" type="flex">
        <el-col>
          <el-form-item prop="store_name" label=" ">
            <el-button type="primary" @click="handleSubmit">{{id ? '立即修改':'立即提交'}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <!--<el-button type="text" @click="crud.cancelCU">取消</el-button>-->
      <!--<el-button :loading="modal_loading" type="primary" @click="handleSubmit('formData')">确认</el-button>-->
    </div>
    <city ref="city" @selectCity="selectCity" :type="type"></city>
  </el-dialog>

</template>

<script>
import crudYxMembershipInterests from '@/api/yxMembershipInterests'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import MaterialList from "@/components/material";
  import city from './city';
var g =  [

  ]
  const defaultForm = {id: null, name: null, content: null, remark: null}
  export default {
    name: 'tempForm',
    components: {pagination, crudOperation, rrOperation, udOperation ,MaterialList, city},
    mixins: [header(), form(defaultForm), crud()],
    data() {
      return {

        permission: {
          add: ['admin', 'storeProductRule:add'],
          edit: ['admin', 'storeProductRule:edit'],
          del: ['admin', 'storeProductRule:del']
        },
        rules: {
          ruleName: [
            {required: true, message: '规格名称不能为空', trigger: 'blur'}
          ]
        },

        templateList: {},
        appointList: [],
        type: 1,
        formData: {
          remark: 1,
          content: 0,
          name: '',
          id:''
        },
        id: 0,

        addressView: false,
        indeterminate: true,
        checkAll: false,
        checkAllGroup: [],
        activeCity: -1,
        provinceAllGroup: [],
        index: -1,
        displayData: '',
        currentProvince: ''

      }
    },
    watch: {},
    methods: {
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        return true
      }, // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
        console.log('uu:'+form.name)
        this.appointList = form.appointInfo ? eval('(' + form.appointInfo + ')') : []
        if(form.id){
          this.templateList =  eval('(' + form.regionInfo + ')')
        }else{
          this.templateList = g
        }
        if(form.id != null && form.id != ''){
          crudYxMembershipInterests.getProductListByid(form.id).then((res) => {

                    this.appointList = res;
                    console.log(this.appointList);
          });
        }

        this.formData.type = form.type || 1
        this.formData.sort = form.sort || 0
        this.formData.name = form.name || ''
        this.formData.appoint_check = form.appoint || 0
        this.id = form.id || 0
      },



      selectCity: function (data, type) {
        console.log(data[0])

        this.appointList.push({
          productName: data[1],
          productId:data[0],
          num: data[2]
        });
      },
      // 单独添加配送区域
      addCity (type) {
        this.$refs.city.addressView = true;
        this.type = type;
        this.$refs.city.getCityList()
      },
      // 提交
      handleSubmit: function () {
        let that = this;

        let data = {
          appointInfo: that.appointList,
          remark: that.formData.remark,
          content: that.formData.content,
          name: that.formData.name,
          id:this.form.id
        };
        crudYxMembershipInterests.add(data).then(() => {
            this.addressView = false;
            this.$message({
              message:'操作成功',
              type: 'success'
            });
            location.reload();
            // setTimeout(() => {
            //   this.$router.push({ path: '/member/yxMembershipInterestsProduct' });
            // }, 500);
        });
      },
      // 删除
      delCity (index,type) {
        if (type === 1) {
          this.appointList.splice(index, 1);
        } else {
          this.appointList.splice(index, 1);
        }
      },
      // 关闭
      cancel () {
        this.formData = {
          type: 1,
          sort: 0,
          name: '',
          appoint_check: 0
        };
        this.appointList = [];
        this.addressView = false;
        this.templateList = [

        ];
      },

      address () {
        this.addressView = true
      },
      enter (index) {
        this.activeCity = index;
      },
      leave () {
        this.activeCity = null;
      }


    }
  }


</script>

<style scoped>

</style>
